<template>
  <div style="padding: 2px 20px;background-color: #fff;width: 99%;margin: 5px auto 0px">
    <DynamicForm
      :labelWidth="85"
      style="margin-top: 20px;"
      :searchloading="loading"
      :items="items"
      :model="formModel"
      @update:model="update"
      @onFinish="submit"
    >
    </DynamicForm>
    <div style="margin-top: 20px;">
      <ElTableWithColumns v-loading="loading" @onChange="onChange" :loading="loading" :data="tableData" :columns="columns" :pagerInfo="pagerInfo">
        <template #tableHeader>
          <el-space>
            <el-button>交易流水EXCEL导出</el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                下载暂存区
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-card>
                  <template #header>
                    <div style="display: flex;justify-content: space-between;">
                      <span> 文件生成后将在系统中保留3天，过期将自动删除 </span>
                      <el-link>刷新</el-link>
                    </div>
                  </template>
                  <el-table></el-table>
                </el-card>
              </template>
            </el-dropdown>
          </el-space>
        </template>
        <template #operate="{ row }">
          <el-space>
            <el-button type="primary" plain size="small" @click="() => viewDetail(row)">详情</el-button>
            <el-button size="small" plain type="danger">下架</el-button>
          </el-space>
        </template>
      </ElTableWithColumns>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { taskStatusOptions, taskTypeOptions } from '../../project/projectList/utils';
import DynamicForm from '@/components/DynamicForm/index.vue';
import { to } from 'await-to-js';
import { HttpStatus } from '@/enums/RespEnum';

const pagerInfo = reactive({
  pageSize: 10,
  total: 0,
  pageNum: 1
})

const router = useRouter()
const loading = ref(false)

const tableData = ref([])

const { execute } = useRequest('/order/tradeLog/listByMerchant', 'GET', {})


const viewDetail = row => {
  router.push(`/project/projectDetail?id=${row.id}`)
}

const columns = [{
  title: "创建时间",
  align: "center",
  dataIndex: "createTime",
  sorter: !0
}, {
  title: "代发批次号",
  align: "center",
  dataIndex: "batchOrderId",
  width: 120
}, {
  title: "业务流水号",
  align: "center",
  dataIndex: "outRequestNo",
  width: 120,
}, {
  title: "交易订单号",
  width: 120,
  align: "center",
  dataIndex: "transferOrderId"
}, {
  title: "付款方名称",
  width: 120,
  align: "center",
  dataIndex: "busName"
}, {
  title: "付款方账号",
  width: 120,
  align: "center",
  dataIndex: "busAccNo"
}, {
  title: "收款方户名",
  align: "center",
  width: 120,
  dataIndex: "toAccName"
}, {
  title: "收款方账号",
  align: "center",
  width: 120,
  dataIndex: "toAccNo"
}, {
  title: "支付通道",
  align: "center",
  dataIndex: "payPass",
}, {
  title: "交易类型",
  align: "center",
  width: 120,
  dataIndex: "tradeType_dictText"
}, {
  title: "交易金额（元）",
  align: "center",
  dataIndex: "fee",
  width: 120,
  textRender: e => parseFloat(e).toFixed(2)
}, {
  title: "交易状态",
  align: "center",
  width: 120,
  dataIndex: "status_dictText"
}, {
  title: "交易描述",
  align: "center",
  width: 120,
  dataIndex: "extraDesc"
}, {
  title: "交易备注",
  align: "center",
  width: 120,
  dataIndex: "remark"
}]

const formModel = ref({})

const update = value => {
  formModel.value = value
}

const items = computed(() => {
  return [
    { prop: 'createTime', label: '创建时间', valueType: 'date', fieldProps: { type: 'daterange' } },
    { prop: 'taskCode', label: '付款方名称', valueType: 'input' },
    { prop: 'title', label: '收款方名称', valueType: 'input' },
    { prop: 'taskStatus', label: '代发批次号', valueType: 'select', options: taskStatusOptions },
    { prop: 'taskType', label: '交易类型', valueType: 'select', options: taskTypeOptions },
    { prop: 'taskType', label: '支付通道', valueType: 'select', options: taskTypeOptions },
  ]
})

const query = async (formData = {}) => {
  loading.value = true
  const [err, res] = await to(execute('/system/unitDomain/queryByDomain', {
    method: 'post',
    data: {
      domain: 'http://localhost:8080'
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
   }))
  loading.value = false
  console.log('execute', res);

  if (err) {
    ElMessage.error('获取列表失败')
  } else {
    const { code } = res
    if (code === HttpStatus.SUCCESS) {
      tableData.value = res?.result?.records
      pagerInfo.total = res.result?.total
    }
  }
}

const onChange = ({ data, type }) => {
  if (type === 'pageNo') {
    pagerInfo.pageNum = data
  }
  if (type === 'pageSize') {
    pagerInfo.pageSize = data
  }
  query()
}

const submit = data => {
  query(data)
}


onMounted(() => {
  query()
})
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
